<template>
    <div>
        <div>
            <div class="title">Nozzle 保养历史记录</div>
        </div>
        <div class="line"></div>
        
        <el-form :inline="true" :model="searchParams" class="demo-form-inline">            
            <el-form-item label="开始时间">
                <el-date-picker
                    v-model="searchParams.startMainteTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择保养日期">
                </el-date-picker>
            </el-form-item>          
            <el-form-item label="结束时间">
                <el-date-picker
                    v-model="searchParams.endMainteTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择保养日期">
                </el-date-picker>
            </el-form-item>          
            <el-form-item label="序列号">
                <el-input v-model="searchParams.sn" placeholder="输入要查找的SN"></el-input>
            </el-form-item>
            <el-form-item label="保养人/说明">
                <el-input v-model="searchParams.mainteUser"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchNozzleHisdata">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="historyData" border :header-cell-style="headerStyleEvent">
            <!-- <el-table-column prop="materialCategoryName" label="所属种类" align="center"></el-table-column> -->
            <el-table-column prop="materialSerialNo" width="140px" label="序列号" align="center"></el-table-column>
            <el-table-column prop="usedQtyValue" width="120px" label="使用值" align="center"></el-table-column>
            <el-table-column prop="maintainTimeStr" label="保养时间" align="center"></el-table-column>
            <el-table-column label="保养员工/人" align="center">
                <template slot-scope="{row}">{{ row.maintainEmpNo }}/{{ row.maintainUser }}</template>
            </el-table-column>
            <el-table-column prop="maintainMark" width="110px" label="其它" align="center">
            </el-table-column>            
            <el-table-column label="SNC结果" align="center" width="140px">
                <template slot-scope="{row}">
                    <el-popover v-if="row.sncInspResult_Nozzle" width="1500" :trigger="row.usedQtyValue>row.thresholdManageValue*0.8?'manual':'click'">
                        <el-table :data="[{...row.sncInspResult_Nozzle}]" max-height="120">
                            <el-table-column property="dateTime" label="Date/Time"></el-table-column>
                            <el-table-column property="nozzleName" label="Nozzle Name"></el-table-column>
                            <el-table-column property="nozzleNickname" label="Nozzle Nickname"></el-table-column>
                            <el-table-column property="result2D" label="2D Result"></el-table-column>
                            <el-table-column property="tipResult" label="Tip Result"></el-table-column>
                            <el-table-column property="stuckResult" label="Stuck Result"></el-table-column>
                            <el-table-column property="stuckValue" label="Stuck Value[mN]"></el-table-column>
                            <el-table-column property="stuckUpperLimit" label="Stuck UpperLimit[mN]"></el-table-column>
                            <el-table-column property="airFlowResult" label="Air Flow Result"></el-table-column>
                            <el-table-column property="airFlowLowerLimit" label="Air Flow LowerLimit[L/min]"></el-table-column>                           
                        </el-table>
                        <el-table :data="[{...row.sncInspResult_Nozzle}]" max-height="120">
                            <el-table-column property="airFlowValue" label="Air Flow Value[L/min]"></el-table-column>
                            <el-table-column property="airFlowUpperLimit" label="Air Flow UpperLimit[L/min]"></el-table-column>
                            <el-table-column property="totalResult" label="Total Result"></el-table-column>
                            <el-table-column property="tipDetail_1_Inside" label="Tip Detail(1-Inside)"></el-table-column>
                            <el-table-column property="tipDetail_1_Outside" label="Tip Detail(1-Outside)"></el-table-column>
                            <el-table-column property="tipDetail_2_Inside" label="Tip Detail(2-Inside)"></el-table-column>
                            <el-table-column property="tipDetail_2_Outside" label="Tip Detail(2-Outside)"></el-table-column>
                            <el-table-column property="tipDetailWide1" label="Tip Detail(Wide1)"></el-table-column>
                            <el-table-column property="tipDetailWide2" label="Tip Detail(Wide2)"></el-table-column>
                            <el-table-column property="tipArea_1" label="Tip Area(1) [%]"></el-table-column>
                        </el-table>
                        <el-table :data="[{...row.sncInspResult_Nozzle}]" max-height="120">
                            <el-table-column property="tipAreaThreshold_1" label="Tip Area Threshold(1) [%]"></el-table-column>
                            <el-table-column property="tipShutterSpeed_1" label="Tip Shutter Speed(1) [ms]"></el-table-column>
                            <el-table-column property="tipArea_2" label="Tip Area(2) [%]"></el-table-column>
                            <el-table-column property="tipAreaThreshold_2" label="Tip Area Threshold(2) [%]"></el-table-column>
                            <el-table-column property="tipShutterSpeed_2" label="Tip Shutter Speed(2) [ms]"></el-table-column>
                            <el-table-column property="tipDetail_3_Inside" label="Tip Detail(3-Inside)"></el-table-column>
                            <el-table-column property="tipDetail_3_Outside" label="Tip Detail(3-Outside)"></el-table-column>
                            <el-table-column property="tipShutterSpeed_3" label="Tip Shutter Speed(3) [ms]"></el-table-column>
                            <el-table-column property="slidingType" label="Sliding Type"></el-table-column>
                            <el-table-column property="stuck_S_Value" label="Stuck(S) Value[%]"></el-table-column>
                        </el-table>
                        <el-table :data="[{...row.sncInspResult_Nozzle}]" max-height="120">
                            <el-table-column property="stuck_S_Limit" label="Stuck(S) Limit[%]"></el-table-column>
                            <el-table-column property="flangeResult" label="Flange Result"></el-table-column>
                            <el-table-column property="flangeValue_digit" label="Flange Value[digit]"></el-table-column>
                            <el-table-column property="flangeLimitValue_digit" label="Flange LimitValue[digit]"></el-table-column>
                            <el-table-column property="flangeShutterSpeed" label="Flange Shutter Speed [ms]"></el-table-column>
                            <el-table-column property="fleaned" label="Cleaned"></el-table-column>
                            <el-table-column property="filterInspectionResult" label="Filter inspection result"></el-table-column>
                            <el-table-column property="filterMeasuredValue" label="Filter measured value"></el-table-column>
                            <el-table-column property="filterInspectionThreshold" label="Filter inspection threshold"></el-table-column>
                            <el-table-column  label=" "></el-table-column>
                        </el-table>
                        <el-link type="primary" slot="reference">{{ (row.usedQtyValue>row.thresholdManageValue*0.8)?'NO':'YES' }}</el-link>
                    </el-popover>
                    <p v-else >{{ (row.usedQtyValue>row.thresholdManageValue*0.8)?'NO':'YES' }}</p>
                </template>
            </el-table-column>
        </el-table>
        <pagination :page.sync="searchParams.page" :limit.sync="searchParams.limit" :total="total"
            @pagination="getNozzleHisdata">
        </pagination>

    </div>
</template>
<script>
import Pagination from '@/components/Pagination.vue';
import { setMaterielSDUCategory,fetchMaterialHistory} from '@/network/MaterialSpecificDetailUse';
export default {
    name: '',
    props: {},
    components: {
        Pagination
    },
    data() {
        return {
            historyData: [],
            total: 0,
            searchParams: {
                limit: 10,
                page: 1,
                startMainteTime:'',
                endMainteTime:'',
                mainteUser:'',
                sn:''
            }
        }
    },
    computed: {
    },
    mounted() {
        // setMaterielCTCategory(this.$route.meta.materielCTCategory)
        setMaterielSDUCategory(this.$route.meta.materielSDUCategory)

        this.getNozzleHisdata()
    },
    methods: {
        headerStyleEvent() {
            return { background: '#eef1f6', color: '#606266' }
        },
        searchNozzleHisdata(){
            this.searchParams.page = 1;
            this.getNozzleHisdata()
        },
        async getNozzleHisdata() {
            try {
                const res = await fetchMaterialHistory(this.searchParams)
                this.historyData = res.data
                this.searchParams.page = res.page
                this.searchParams.limit = res.limit
                this.total = res.total||0
                console.log(res);

            } catch (error) {
                console.log(error);
            }
        },
    }
}

</script>
<style>
.el-form-item {
    margin-bottom: 16px;
}

div.el-form-item__content {
    line-height: normal;
}
.title {
  font-size: 24px;
  margin-left: 100px;
  margin-bottom: 8px;
  /* font-weight: bold; */
  /* font-family: 思源宋体 SemiBold; */
}
.line {
  background: linear-gradient(to left, #ffffff, #637ca0, #ffffff);
  height: 3px;
  margin-bottom: 8px;
}
</style>